<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发布文章</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">
	<link rel="stylesheet" href="/resource/kindeditor/themes/default/default.css" />
	<link rel="stylesheet" href="/resource/kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="/resource/kindeditor/kindeditor.js"></script>
	<script charset="utf-8" src="/resource/kindeditor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="/resource/kindeditor/plugins/code/prettify.js"></script>
	<script>
		KindEditor.ready(function(K) {
			window.editor1 = K.create('textarea[name="content1"]', {
				cssPath : '/resource/kindeditor/plugins/code/prettify.css',
				uploadJson : '/resource/kindeditor/jsp/upload_json.jsp',
				fileManagerJson : '/resource/kindeditor/jsp/file_manager_json.jsp',
				allowFileManager : true,
				afterCreate : function() {
					var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
				}
			});
			prettyPrint();
		});
	</script>
</head>
<body>

	<%=htmlData%>
	<div class="container">
	
		<form action="publish" method="post">
		
			  <div class="form-group">
			    <label for="title">文章标题</label>
			    <input type="text" class="form-control" name="title" id="title" placeholder="请输入标题...">
			  </div>
			  
			  <div class="form-group">
			    <label for="picture">文章标题图片</label>
			    <input type="file" class="form-control" name="file" id="picture" placeholder="请选择标题图片...">
			  </div>
			  
			  
			  <div class="form-group">
			    <label for="channelId">所属栏目</label>
			    <select class="form-control" id="channelId" name="channelId" onchange="change(this.value)">
			      <option>请选择</option>
			    </select>
			    
			    <label for="categoryId">所属分类</label>
			    <select class="form-control" id="categoryId" name="categoryId">
			      <option>请选择</option>
			    </select>
  			  </div>
  			  
  			  <!-- 富文本编辑器 -->
  			  <textarea id="content" name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
			
			 <input type="button" class="btn btn-success" onclick="publish()" value="发布">
		</form>
	</div>
</body>
<script type="text/javascript">
	//文档就绪函数
	$(function(){
		//获取所有的栏目数据
		$.post(
			"/my/getChannels",
			function(channels){
				//直接赋值
				for ( var i in channels) {
					//追加到下拉框中
					$("#channelId").append("<option value='"+channels[i].id+"'>"+channels[i].name+"</option>");
				}
			}
		)
	})
	
	
	//改变栏目数据时，修改分类数据
	function change(id){
		//进行判断
		
		//清除数据
		$("#categoryId").html("<option>请选择</option>");
		
		//如果不为请选择，则查询数据库，否则显示请选择
		if(id != '请选择'){
			
			//调用ajax查询分类数据
			$.post(
				"/my/getCategoryByChannelId",
				{channelId:id},
				function(categories){
					//直接赋值
					for ( var i in categories) {
						//追加到下拉框中
						$("#categoryId").append("<option value='"+categories[i].id+"'>"+categories[i].name+"</option>");
					}
				}
			)
			
		}
	}
	
	//发布文章
	function publish(){
		//获取form表单数据
		var formData = new FormData($("form")[0]);
		
		//获取富文本编辑器数据
		formData.set("content",editor1.html());
		
		//使用ajax进行发布文章
		$.ajax({
			url:"/my/publish",
			data:formData,
			type: "post",
			processData: false,//用于对data参数进行序列化处理 这里必须false
			contentType: false, //必须*/
			success: function(flag){
				
				if(flag){
					alert("发布成功");
					
					//跳转到个人中心首页
					location="/my";
					
				}else{
					alert("发布失败");
				}
			}
		})
	}

</script>
</html>

<%!
private String htmlspecialchars(String str) {
	str = str.replaceAll("&", "&amp;");
	str = str.replaceAll("<", "&lt;");
	str = str.replaceAll(">", "&gt;");
	str = str.replaceAll("\"", "&quot;");
	return str;
}
%>